import React, {useEffect, useState} from 'react';
import { useHistory } from "react-router-dom";
import http from "../../../model/http";
import {PullToRefresh, DatePicker, List, Flex, Modal, Button, SwipeAction, Toast} from "antd-mobile";
import './list.less';
import '../../../libs/font/iconfont.css'
import {dateFormat, sendMsg} from '../../../model/code';
import Header from "../../../components/header/Header";
import examineImg1 from '../../../libs/img/user/examine1.png'
import examineImg2 from '../../../libs/img/user/examine2.png'
let page = 1;
const h = document.documentElement.clientHeight - 100;
function Project() {
  const history = useHistory();
  const nowTimeStamp = new Date(); 
  const [date,setDate] = useState(nowTimeStamp);
  const [date2,setDate2] = useState(nowTimeStamp)

  const [list,setList] = useState([]);
  const [load,setLoad] = useState(false);
  
  const getList = (status)=>{
    (async ()=>{
      setLoad(true);
      const _list = await http.post('/scheduler/list',{ 
        page:page,
        items:10,
        beginTime: dateFormat(date,'yyyy-MM-dd'),
        endTime: dateFormat(date2,'yyyy-MM-dd'),
      })
      setTimeout(()=>{setLoad(false)},800)
      if(status == 'clearArr'){
        setList([..._list.data]);
      }else{
        if(!_list.data.length) return;
        
        setList([...list,..._list.data]);
      }

      page=page+1
      
    })()
  }

  useEffect(()=>{
    list.length || getList();

    return ()=>{
      page=1
    }
    // eslint-disable-next-line
  },[])

  const doctor =(item)=>{
    // history.push('/yuyue/edit2',{
    //   outUser:history.location.state,
    //   item:item
    // });
    console.log(item)
    if(item.sch_status == '手工'){
      history.push('/yuyue/recordRegistrationEdit',{ 
        outUser:item
      });
    }else if(item.sch_status == '系统'){ 
      history.push('/yuyue/appointmentRecord',{
        item:item, 
      });
    }
     

    
  }

  // 查询
  const submitSearch = () => { 
    page=1 
    setList([])
    getList('clearArr')
  }

  // 移除
  const editRemove = async (item) => {  
    Modal.alert('提示', '确定作废这条记录吗', [
      { text: '取消' },
      {
        text: '确定', onPress: async () => {
          const delResult = await http.post('/scheduler/delSchReport',{
            schId: item.srid
          })
          if(delResult.code == 0){
            Toast.success(delResult.msg) 
            setTimeout(() => {
              submitSearch() 
            }, 500);  
          }else{
            Toast.success(delResult.msg)
          }
        }
      }
    ])
    
  }
 

  return (
    <div className='v-yuyue-appointmentRecord-list'>
      <List className='g-mb10 g-p5-10 g-bg-f g-bdrs12 appointmentRecord-list-search-box'>
         
        <Flex>
          <Flex.Item> 
            <DatePicker mode="date" value={date}  onChange={d=>{
                setDate(d)
                 
                let dateNum = new Date(d).getTime()
                let date2Num = new Date(date2).getTime()
                if(Number(dateNum) > Number(date2Num)){
                  setDate2(d) 
                }  
                
              }}>  
              <List.Item arrow="horizontal"></List.Item>
            </DatePicker>    
          </Flex.Item>
          <Flex.Item>
            <DatePicker mode="date" value={date2} minDate={date}  onChange={d=>{setDate2(d)}}>  
              <List.Item arrow="horizontal"></List.Item>
            </DatePicker>
          </Flex.Item>
          <Flex.Item><Button type="primary" size="small" className="appointmentRecord-list-search" onClick={() => submitSearch()}>查询</Button></Flex.Item>
        </Flex>
        
      </List>
      <PullToRefresh direction='up' onRefresh={getList} refreshing={load} style={{height:h, overflow:'auto',paddingTop:'70px',fontSize:'14px'}}>
        
        {/* i.displayname */}
        
        {list.length > 0 ?
           list.map((i,idx)=>(
            <SwipeAction
              style={{marginBottom:'10px' }}
              autoClose
              right={[
                {
                  text: <span style={{fontSize:'25px'}} className="iconfont icon-bianji"></span>,
                  onPress: () => {doctor(i)},
                  style: { backgroundColor: '#f0ad4e', color: 'white',fontSize:'25px',paddingLeft: "20px",paddingRight:'20px' },
                },
                {
                  text: <span style={{fontSize:'25px'}} className="iconfont icon-shanchu1"></span>,
                  onPress: () => editRemove(i),
                  style: { backgroundColor: '#dd524d', color: 'white', fontSize:'25px',paddingLeft: "20px",paddingRight:'20px' },
                },
              ]}
              onOpen={() => console.log('global open')}
              onClose={() => console.log('global close')}
            >
              <div className='v-p18 g-bdrs12 g-bg-f g-mb10 card-box' onClick={()=>{doctor(i)}}> 
                <p className='g-f14 g-mb10 card-box-title'>[<b style={{color: 'red'}}>{i.typename}</b>]&emsp;{i.customer_name}&emsp;卡号：{i.customer_card_no}</p>
                <p className='v-lh20 g-c8 v-f13 card-box-p'>治疗时间：{i.sch_date} {i.sch_time}&emsp;治疗时长：{i.estimate_time}</p>
                <p className='g-f14 g-mb10 card-box-title' dangerouslySetInnerHTML={{ __html: i.trInfo}}></p> 
                <p className='v-lh20 g-c8 v-f13 card-box-p'>{i.hocusTypeName}&emsp;{i.is_check_name}</p>
                <p className='v-lh20 g-c8 v-f13 card-box-p'>提交时间：{i.create_time}</p>
                
                {i.status == 0 ? <img src={examineImg1} />:<img src={examineImg2} />}
              </div> 
              
              
            </SwipeAction>
          ))   
        :<div style={{color:'#bbb',textAlign:'center',fontSize:'14px'}}>暂无数据</div>}
        
 
 
      </PullToRefresh>
      <Header />
    </div>
  )
}
// crdId --- serviceId
// tb_customer_id --- customerCrmId
// hosId srid
export default Project;